/**
* 珠宝 模块 - 组建
*/
<template>
  <div>
    <div class="h-jewelry" v-if="terminal === 'pc'">
      <img src="@/assets/img/new.jpg" class="h-banner" />
      <article class="h-overflow">
        <section class="h-section fl">
          <div class=" h-hover"  v-for="item in list"  :key="item.id">
            <img :src="item.url" />
            <ul class="h-list">
              <li v-for="val in item.list" :key="val.id" @click="handleRouterClick(val)">{{ val.name }}</li>
            </ul>
          </div>
          <!-- <div class="h-380 h-hover">
            <img src="@/assets/img/new.jpg" />
            <ul class="h-list">
              <li v-for="item in list" :key="item.id" @click="handleRouterClick(item)">{{ item.name }}</li>
            </ul>
          </div> -->
        </section>
        <!-- <aside class="h-aside fr">
          <div class="h-270 h-hover">
            <img src="@/assets/img/new.jpg" />
            <ul class="h-list">
              <li v-for="item in list" :key="item.id" @click="handleRouterClick(item)">{{ item.name }}</li>
            </ul>
          </div>
          <div class="h-500 h-hover">
            <img src="@/assets/img/new.jpg" />
            <ul class="h-list">
              <li v-for="item in list" :key="item.id" @click="handleRouterClick(item)">{{ item.name }}</li>
            </ul>
          </div>
        </aside> -->
      </article>
    </div>
    <div v-else class="h-jewelry-ph">
      <div class="h-model-ph" v-for="item in list"  :key="item.id" >
        <img :src="item.url" />
        <ul class="h-list-ph">
          <li v-for="val in item.list" :key="val.id" @click="handleRouterClick(val)">{{ val.name }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { footerList } from '@/mock' // 珠宝数据
import { footerData,floatData } from '@/api'

export default {
  name: 'FooterBar',
  props: {},
  data () {
    return {
      list:[],
      terminal: '', // 终端类型
      footerData: [],
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
    this.getFloatData()
    // this.getFooterData() // 珠宝数据加载
  },
  mounted () {
    this.footerData = footerList.result // 使用接口时 此处删除
  },
  methods: {
    /**
     *@Description
     *@Param
     *@Return .
     **/
    getFloatData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      floatData(params).then(res => {
        this.list = res
        console.log(this.list)
      })
    },
    getFooterData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      footerData(params).then(res => {
        this.footerData = res
      })
    },
    /**
    *@Description
    *@Param
    *@Return 点击跳转路由.
    **/
    handleRouterClick(item){
      this.$router.push({ name: 'list', params: { type:item.type, id: item.id } })
    },
  }
}
</script>

<style lang="scss" scoped>
  .h-jewelry {
    .h-banner{
      width: 100%;
      height: 380px;
    }
  }
  /* 珠宝模块 主体 区域 */
  .h-overflow{
    overflow: hidden;
    img{
      width: 100%;
    }
    /* 左侧 */;
    .h-section{
      width: 100%;
      margin-bottom: 50px;
      .h-380{
        img{
          height: 380px;
        }
      }
    }
    /* 右侧 */;
    .h-aside{
      width: 340px;
      .h-270{
        img{
          height: 270px;
        }
      }
      .h-500{
        img{
          height: 490px;
        }
      }
    }
    /* 鼠标移入事件 抽出 */
    .h-hover{
      position: relative;
      margin-top: 10px;
      overflow: hidden;
      cursor: pointer;
      .h-list{
        position: absolute;
        bottom: -100px;
        width: 100%;
        transition: all 1s;
        line-height: 50px;
        background: rgba(255, 255, 255, 0.5);
        li{
          margin: 0 10px;
          float: left;
          font-size: 14px;
          color: #000;
          &:hover{
            text-decoration: underline;
            color: #900028;
          }
        }
      }
      &:hover{
        .h-list{
          bottom: 0;
        }
      }
    }
  }
  /* 移动端 */
  .h-jewelry-ph{
    padding: 0 15px;
    .h-model-ph{
      margin-bottom: 10px;
    }
    img{
      width: 100%;
    }
    .h-list-ph{
      overflow: hidden;
      margin-right: -15px;
      li{
        padding: 10px 15px;
        float: left;
      }
    }
  }
</style>
